<template>
<div>
  <div class="head">
    <el-row>
      <el-col :span="12" >
      <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
      </el-col>
        <el-col :span="10" :offset="0">
        <!-- <el-button type="primary" icon="el-icon-search" @click="scarch">搜索</el-button> -->
          <el-button type="primary" icon=" el-icon-plus" @click="add">添加</el-button>  
      </el-col>
    </el-row>
   </div>
  <el-table
    :data="pageInfo.list"
    style="width: 100%;margin-bottom: 20px;"
    row-key="mid"
    border
    
    :tree-props="{children: 'children', hasChildren: true}">
    <!-- default-expand-all -->
    <el-table-column prop="mid" label="编号" sortable width="180"></el-table-column>
    <el-table-column  prop="mname" label="名字" sortable width="180"></el-table-column>
    <el-table-column  prop="grade" label="菜单" sortable width="180"></el-table-column>
    <el-table-column prop="murl" label="路径"></el-table-column>
    <el-table-column prop="remark" label="备注"></el-table-column>
     <el-table-column prop="mioc" label="图标"></el-table-column>
      
     <el-table-column align="right">
      <template slot-scope="scope">
        <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
         <el-button size="mini" type="success" v-if="scope.row.state === 0"  @click="qiyong(scope.row.mid)">启用</el-button>
         <el-button size="mini" type="danger" v-if="scope.row.state === 1"  @click="jinyong(scope.row.mid)">禁用</el-button>
      </template>
    </el-table-column>

  </el-table>
<!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-count="pageInfo.pages"
      :current-page="pageNum"
      :page-sizes="limits"
      :page-size="pageSize"
      layout="total,sizes, prev, pager, next"
      >
      <!--  -->
    </el-pagination>
    <!-- 表单 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item hidden label="序号" :label-width="formLabelWidth">
        <el-input hidden v-model="form.mid" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="管理名" :label-width="formLabelWidth">
        <el-input v-model="form.mname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="菜单类型" :label-width="formLabelWidth">
         <el-select v-model="form.grade" style="width:100%" placeholder="请选择菜单类型">
           <el-option  label="一级菜单"  value="0"></el-option>
          <el-option 
          v-for="role in data"
          :key="role.mid"
          :label="role.remark" 
          :value="role.mid">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="路径" :label-width="formLabelWidth">
        <el-input v-model="form.murl" autocomplete="off"></el-input>
      </el-form-item>
       
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="form.remark" autocomplete="off"></el-input>
      </el-form-item>    
      </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>
<script>
  export default {
    data() {
      return {
        // 分页
        data:[],
        pageInfo: {
          list:[],
        },
        // 表单数据
        form: {},
        // 表单显示
        dialogFormVisible:false,
        // 查询框
        input:'',
        // 表格的宽
        formLabelWidth: '120px',
        // 条数
        limits:[3,5,7],
        pageSize:7,// limits 的第几条
        pageNum:1,// 第几页
        action:'',
      }
    },
    created(){
        this.$http.get("/menu/allRname",{params:{rid:this.rid}}).then(res=>{
          this.data=res
          console.log(this.install)
        })
      this.scarch();
    },
    methods: {
       submit(){
        this.dialogFormVisible=false;
        this.$http.get(this.action,{params:{mid:this.form.mid,mioc:this.form.mioc,mname:this.form.mname,remark:this.form.remark,grade:this.form.grade}}).then(res=>{
           if(res){
               this.$message({message: '提交成功', type: 'success'});
               this.scarch();
           }else{
             this.$message.error("提交失败")
               this.scarch();
           }
        })
      },
     handleSizeChange(a){
        this.pageSize=a
        this.scarch();
      },handleCurrentChange(a){       
        this.pageNum=a
        this.scarch();
      },add(){
        this.dialogFormVisible=true;
        this.form={};
        this.action="/menu/add"
      },

      edit(row) {
        this.dialogFormVisible=true;
        this.form=row;
        console.log(row)
        this.action="/menu/update"
      },

      jinyong(uid) {
      this.$http.get('/menu/state',{params:{mid:uid,state:0}}).then(res=>{
          if(res){
            this.$message("修改成功")
            this.scarch();
          }
        })
        
      },
       qiyong(uid) {
        this.$http.get('/menu/state',{params:{mid:uid,state:1}}).then(res=>{
          if(res){
            this.$message("修改成功")
            this.scarch();
          }
        })
        
      },scarch(){
          this.$http.get('/menu/finAll',{params:{pageNum:this.pageNum,pageSize:this.pageSize}}).then(res=>{
           this.pageInfo=res
        })
      }
    },
  }
</script>